import { Form, Input } from 'antd';
import { useNode } from '@craftjs/core';
import { findAntFormItemParent } from '../util';

import { Settings } from './Settings';

export const DraggableFormText = ({ placeholder, ...formItemProps }: any) => {
  const {
    connectors: { connect, drag },
  } = useNode();
  return (
    <Form.Item label="表单文本" name="formText" {...formItemProps}>
      <Input
        {...{ placeholder }}
        ref={(ref) => {
          if (ref?.nativeElement) {
            const antFormItem = findAntFormItemParent(ref.nativeElement);
            if (antFormItem) {
              connect(drag(antFormItem));
            }
          }
        }}
      />
    </Form.Item>
  );
};

DraggableFormText.craft = {
  displayName: '表单文本',
  props: {},
  related: {
    settings: Settings,
  },
};
